import React from "react";
import { DeleteFilled } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { message as Message} from "antd";
import { db,payloads, SUCCESS_CODE} from "@/service";
import style from "./index.module.less";

interface IProps {
  title: string;
  id: string;
  date: string;
  image: string;
  type: string;
  elements?:any[];
}
const ProjectItem = (props: IProps) => {
  const { title, date, id, image, type } = props;
  const history = useHistory();
  const deletePayload = async (e: any) => {
    const { code, data, message } = await payloads.removePayload(id);
    if (code === SUCCESS_CODE && data) {
      window.location.reload() 
      Message.success(`删除成功`)
    } else {
      Message.error(message);
    }
    
  };
  
  const projects = async () => {
      history.push(`/diagram/${type}/${id}`);
      const res= await db.collection("payloads")
      .where(
        {diagramId:id}
      )
      .field({
        type:true,
        elements:true,
        diagramId:true,
        _id:true,
      })
      .get()
      console.log(res.data);
  };

  return (
    <div
      className={style.itemContainer}
    >
      <div>{title}</div>
      <div>{date}
      <DeleteFilled onClick={deletePayload} />
      </div>
      <div style={{ backgroundImage: `url(${image?? ""})` }}
      className={style.bgImg}
      onClick={projects}></div>
    </div>
  );
};
export default ProjectItem;